<template>
    <div class="searchresult">
        <div class="type">
            <span :class="search_type==''||search_type=='video'?'choose':''" @click="search_type=''" v-text="'综合'"></span>
            <span :class="search_type=='media_bangumi'?'choose':''" @click="search_type='media_bangumi'" v-text="'番剧'+(data.top_tlist.media_bangumi>0?('('+(data.top_tlist.media_bangumi>99?'99+':data.top_tlist.media_bangumi)+')'):'')"></span>
            <span :class="search_type=='bili_user'?'choose':''" @click="search_type='bili_user'" v-text="'UP主'+(data.top_tlist.bili_user>0?('('+(data.top_tlist.bili_user>99?'99+':data.top_tlist.bili_user)+')'):'')"></span>
            <span :class="search_type=='media_ft'?'choose':''" @click="search_type='media_ft'" v-text="'影视'+(data.top_tlist.media_ft>0?('('+(data.top_tlist.media_ft>99?'99+':data.top_tlist.media_ft)+')'):'')"></span>
        </div>
        <div class="order" @click="search_type='video'" v-if="search_type==''||search_type=='video'">
            <span :class="order==''?'choose':''" @click="order=''">{{order}}默认排序</span>
            <span :class="order=='click'?'choose':''" @click="order='click'">播放多</span>
            <span :class="order=='pubdate'?'choose':''" @click="order='pubdate'">新发布</span>
            <span :class="order=='dm'?'choose':''" @click="order='dm'">弹幕多</span>
        </div>
        
        <keep-alive>
            <result-list v-if="search_type=='media_bangumi'" v-show="search_type=='media_bangumi'" :params="{page,pagesize,order:'totalrank',search_type,keyword}" :index='params'></result-list>
        </keep-alive>
        <keep-alive>
            <result-list v-if="search_type=='bili_user'" v-show="search_type=='bili_user'" :params="{page,pagesize,order:'totalrank',search_type,keyword}" :index='params'></result-list>
        </keep-alive>
        <keep-alive>
            <result-list v-if="search_type=='media_ft'" v-show="search_type=='media_ft'" :params="{page,pagesize,order:'totalrank',search_type,keyword}" :index='params'></result-list>
        </keep-alive>

        
        <keep-alive>
            <result-list v-if="order=='click'&&search_type=='video'" v-show="order=='click'" :params="{page,pagesize,order,search_type,keyword}" :index='params'></result-list>
        </keep-alive>

        <keep-alive>
            <result-list v-if="order=='pubdate'&&search_type=='video'" v-show="order=='pubdate'" :params="{page,pagesize,order,search_type,keyword}" :index='params'></result-list>
        </keep-alive>

        <keep-alive>
            <result-list v-if="order=='dm'&&search_type=='video'" v-show="order=='dm'" :params="{page,pagesize,order,search_type,keyword}" :index='params'></result-list>
        </keep-alive>
        
        <block v-show='order==""&&(search_type==""||search_type=="video")'>
            <ul v-if="data.result[3].data.length">
                <li v-for="(item,index) in data.result[3].data" :key='index'>
                    <line-item :item='item' type="media_bangumi"></line-item>
                </li>
                <div class="fenge" @click="search_type='media_bangumi'">
                    <span class="left"></span>
                    查看更多番剧 >
                    <span class="right"></span>
                </div>
            </ul>

            <ul v-if="data.result[3].data.length"> 
                <li v-for="(item,index) in data.result[4].data" :key='index'>
                    <line-item :item='item' type="media_ft"></line-item>
                </li>
                 <div class="fenge" @click="search_type='media_ft'">
                    <span class="left"></span>
                    查看更多影视 >
                    <span class="right"></span>
                </div>
            </ul>
            <ul>
                <li v-for="(item,index) in videolist" :key='index'>
                    <line-item :item='item' type="video"></line-item>
                </li>
            </ul>
        </block>

        <div class="loading">
            加载中...
        </div>
    </div>
</template>

<script>
import ResultList from '../components/common/ResultList.vue'
import LineItem from '../components/common/LineItem.vue'
export default {
    components:{
        ResultList,
        LineItem
    },
    props:[
        'keyword'
    ],
    watch:{
        order(now){
            if(now==''){
                if(this.search_type==''||this.search_type=='video'){
                    window.addEventListener('scroll',this.scroll)
                }
                else{
                    window.removeEventListener('scroll',this.scroll)
                }
            }
            else{
                window.removeEventListener('scroll',this.scroll)
            }
        }
    },
    data(){
        return{
            data:{},
            videolist:[],
            page:1,
            pagesize:20,
            search_type:'',
            order:'',
            params:{
                page:this.page,
                pagesize:this.pagesize,
                search_type:this.search_type,
                order:this.order,
                keyword:this.keyword
            }
        }
    },
    methods:{
        getdata(page){
            this.$axios.get('/static/x/web-interface/search/all/v2',{
            params:{
                keyword:this.keyword,
                page,
                pagesize:20
            }
            }).then(res=>{
                if(page==1){
                    this.data=res.data.data
                }
                this.videolist.push(...res.data.data.result[8].data)
            })
        },
        scroll(){
            let offsetHeight= document.scrollingElement.offsetHeight
            let scrollTop= parseInt(document.scrollingElement.scrollTop)
            let screen=window.screen.height
            if((offsetHeight==scrollTop+screen)||(offsetHeight==scrollTop+screen+1)){
                this.getdata(this.page++)
            }
        }
    },
    created(){
        this.getdata(this.page++)
        window.addEventListener('scroll',this.scroll)
    }
}
</script>
<style lang="less" scoped>
@import '../assets/css/common';
.searchresult{
    border-top: 0.5px solid #ccc;
    .fenge{
        margin: 1rem;
        color: #999;
        display: flex;
        font-size: 1.1rem;
        align-items: center;
        span{
            flex:1;
            &.left{
                background-image: linear-gradient(to left ,#ccc,#eee);
                margin-right: 1rem;
            }
            &.right{
                background-image: linear-gradient(to right ,#ccc,#eee);
                margin-left: 1rem;
            }
            height: 0.66px;
        }
    }
    .type,.order{
        display: flex;
        justify-content: space-between;
        padding: 0 1.6rem;
        height: 3.4rem;
        align-items: center;
        line-height: 3rem;
        color: #666;
    }
    .type{
        border-bottom: 0.5 solid #ccc;
        box-shadow: 0 0.5px 5px #ddd;
        position: relative;
        background-color: #fff;
        z-index: 2;
        .choose{
            border-color: @color;
            color: @color;
        }
        span{
            border-bottom: 0.15rem solid transparent;
            height: 2rem;
            line-height: 2rem;
            margin-top: 0.5rem;
        }
    }
    .order{
        background-color: #f9f9f9;
        .choose{
            color:@color;
        }
        span{
            background:transparent;
        }
    }
    .loading{
        padding: 3rem 0 1.5rem 0;
        font-size: 1.08rem;
        color: #999;
        text-align: center;
    }
}
</style>